<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>分类管理</title>
<link type="text/css" rel="stylesheet" th:href="@{/css/page.css}"/>
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<!-- mmGrid -->
<link rel="stylesheet" type="text/css" th:href="@{/plug/mmGrid/mmGrid.css}"/>
<script type="text/javascript"  th:src="@{/plug/mmGrid/mmGrid.js}" ></script>
<!-- mmGrid page -->
<link rel="stylesheet" type="text/css" th:href="@{/plug/mmGrid/mmPaginator.css}"/>
<script type="text/javascript" th:src="@{/plug/mmGrid/mmPaginator.js}" ></script>

<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"  media="all"/>
<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>

<link type="text/css" rel="stylesheet" th:href="@{/js/layer/skin/layer.css}"/>
<script type="text/javascript" th:src="@{/js/layer/layer.js}" ></script>
<style type="text/css">
</style>

</head>
<body>
<div  lay-allowclose="true" style="margin-left:15px; width: 98%">
<div class="first_div" style="border:none;">
	<table class="param_table" style="margin-left:10px;" >
		<tr>
			<td style="width:150px;">
				<span>内容：</span>
				<input type="text" id="content" name="content" class="input_0" />
			</td>
			<td style="width:150px;">
                <span>类型：</span>
				<select id="type" name="type" class="input_0">
					<option value="">全部</option>
					<option value="1">可回收</option>
					<option value="2">干垃圾</option>
					<option value="3">湿垃圾</option>
					<option value="4">有害垃圾</option>
				</select>
            </td>
			<td style="width:150px;">
				<span>有害等级：</span>
				<select id="harm" name="harm" class="input_0">
					<option value="">全部</option>
					<option value="0">无害</option>
					<option value="1">一般</option>
					<option value="2">严重</option>
					<option value="3">非常危险</option>
					<option value="4">致命</option>
				</select>
			</td>
			<td style="">
			<div class="layui-btn-group">
			  <button class="layui-btn" onclick="search()">查询</button>
			  <button class="layui-btn" onclick="addRow()">增加</button>
			</div>
			</td>
		</tr>
	</table>
	
	<div style="margin:3px 10px 10px 10px;"></div>
	<div id="exampleTableUser" style="margin-top:5px;" ></div>
	<div id="paginator11-1" align="right" style="margin-right:10px;" ></div>
</div>
</div>
</body>
</html>

<script type="text/javascript">
$(function(){	
	//表格
	$('#exampleTableUser').mmGrid({
    	root:'rows',// 和后台数据保存列一致,对应MMGridPageVoBean rows
		url:"/admin/fenlei/getAllByLimit",
    	width: 'auto',
    	height: 'auto',
    	//checkCol: true,
    	fullWidthRows: true, //表格第一次加载数据时列伸展，自动充满表格
    	showBackboard: false,
        //multiSelect: true,
        indexCol: true,  //索引列
        params:function(){
        	var param = new Object();
        	param.content = $.trim($("#content").val());
        	param.type = $.trim($("#type").val());
        	param.harm = $.trim($("#harm").val());
        	console.log(param);
        	return param;
        },
        cols: [{title: 'ID', name: 'id', width:60, hidden:true},
			   {title: '内容', name: 'content', width:50},
			   {title: '类型', name: 'type', width:80, renderer:function(val, item, rowIndex){
			   	var t = "";
			   	    switch (val) {
						case 1: t = "可回收";break;
						case 2: t = "干垃圾";break;
						case 3: t = "湿垃圾";break;
						case 4: t = "有害";break;
					}
					return t;
				}},
			{title: '价值含量(每千克/元)', name: 'value', width:40},
			{title: '有害等级', name: 'harm', width:40, renderer:function(val, item, rowIndex){
					var t = "";
					switch (val) {
						case 0: t = "无害";break;
						case 1: t = "一般";break;
						case 2: t = "严重";break;
						case 3: t = "非常危险";break;
						case 4: t = "致命";break;
					}
					return t;
				}},
			   {title: '查询次数', name: 'viewCount', width:40},
			   {title: '操作', name: 'op', width:20, renderer:function(val, item, rowIndex){
				   var buttonStr ='<span class=" layui-btn layui-btn-danger layui-btn-sm" onclick="deleteRowOne('+"\'"+item.id+"\'"+')" >删除</span>';
				   return "<div class='span_btus' >" + buttonStr + "</div>";
			   }}
           ],
        plugins : [
        	$('#paginator11-1').mmPaginator({
        		totalCountName: 'total',    //对应MMGridPageVoBean count
        		page: 1,                    //初始页
        		pageParamName: 'page',      //当前页数
        		limitParamName: 'limit', //每页数量
        		limitList: [10, 20, 30, 50]
        	})
        ]
    });
});

//查询
function search(){
	$('#exampleTableUser').mmGrid().load({"page":1});
}

//删除一行
function deleteRowOne(id){
	layer.confirm('确认删除吗？', {icon: 3, title:'提示'}, function(index){
		var param = [];
		param.push({"name":"id", "value":id});
    	$.ajax({
    		type:"POST",
    		async:true,  //默认true,异步
    		data:param,
    		url:"/admin/fenlei/del",
    		success:function(data){
    			if(data == "SUCCESS"){
    				layer.alert('删除成功！', {icon: 1}, function(indexOk){
    					search();
    					layer.close(indexOk);
       				});
    			}else{
    				layer.alert('删除失败！', {icon: 2}, function(indexNo){
       					layer.close(indexNo);
       				});
    			}
    	    }
    	});
	});
}

function addRow(){
	layer.open({
	    type: 2,
	    title: '增加',
	    area: ['70%', '80%'],
	    content: '/admin/fenlei/add' //iframe的url
	});
}
</script>